#toc {
  display: flex;
  flex-direction: column;
  width: 232px;
}

#toc-container {
  width: 232px;
  position: sticky;
  top: calc(18 * var(--base-spacing));
  padding: var(--base-spacing);
}

@media (max-height: 600px) and (orientation: landscape){
  #toc-container {
   position: fixed;
   top: 90px;
  }
}

.toc-list {
  margin-block-start: calc(2 * var(--base-spacing));
  margin-block-end: 0;
}

#toc ul {
  list-style-type: none;
  padding: 0;
}

#toc li {
  margin-bottom: calc(2.5 * var(--base-spacing));
}

#toc .toc-list li > ul {
  margin-top: calc(2.5 * var(--base-spacing));
  padding-left: calc(3 * var(--base-spacing));
}

/*@media (max-width: 1366px) {
  #toc {
    left: calc(102 * var(--base-spacing));
  }
}*/
@media (max-height: 820px) and (orientation: landscape){
  .toc-nav {
    max-height: calc(100vh - 200px);
    overflow: auto;
  }
}

@media (max-width: 768px) {
  #toc {
    display: none;
  }
}


.toc-title {
  color: var(--text-primary);
  margin-bottom: calc(2 * var(--base-spacing));
}

#content .toc-nav a {
  color: var(--action-primary-content-default);
  text-decoration: none;
  border-bottom: none;
}

#toc li a:hover {
  color: var(--action-primary-content-hover);
}

#toc li.active > a {
  color: var(--action-primary-content-hover);
}

#toc li:focus-visible {
  box-shadow: 0px 0px 0px 2px var(--focus-default);
}
